#button-login-show {
  width: 50px;
  height: 30px;
  border: 1px solid #000;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  line-height: 30px; }

#passport-h5-login-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99; }
  #passport-h5-login-bg div, #passport-h5-login-bg dl, #passport-h5-login-bg dt, #passport-h5-login-bg dd, #passport-h5-login-bg ul, #passport-h5-login-bg ol, #passport-h5-login-bg li, #passport-h5-login-bg h1, #passport-h5-login-bg h2, #passport-h5-login-bg h3, #passport-h5-login-bg h4, #passport-h5-login-bg h5, #passport-h5-login-bg h6, #passport-h5-login-bg pre, #passport-h5-login-bg code, #passport-h5-login-bg form, #passport-h5-login-bg fieldset, #passport-h5-login-bg legend, #passport-h5-login-bg input, #passport-h5-login-bg button, #passport-h5-login-bg textarea, #passport-h5-login-bg p, #passport-h5-login-bg blockquote, #passport-h5-login-bg th, #passport-h5-login-bg td {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent; }
  #passport-h5-login-bg a {
    color: #525a66;
    text-decoration: none; }
  #passport-h5-login-bg a:visited {
    color: #525a66; }
  #passport-h5-login-bg img {
    display: block;
    max-width: 100%;
    border: none; }
  #passport-h5-login-bg .clearfix {
    *zoom: 1; }
  #passport-h5-login-bg .clearfix:before,
  #passport-h5-login-bg .clearfix:after {
    display: table;
    line-height: 0;
    content: ""; }
  #passport-h5-login-bg .clearfix:after {
    clear: both; }
  #passport-h5-login-bg input[type="submit"],
  #passport-h5-login-bg input[type="reset"],
  #passport-h5-login-bg input[type="button"],
  #passport-h5-login-bg button {
    -webkit-appearance: none; }
  #passport-h5-login-bg input, #passport-h5-login-bg textarea {
    outline: none;
    -webkit-user-select: auto; }
  #passport-h5-login-bg ul, #passport-h5-login-bg dl {
    list-style: none; }
  #passport-h5-login-bg .login-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 270px;
    background: #ffffff;
    border-radius: 2px; }
  #passport-h5-login-bg .login-wrap.keyboard-out {
    top: 10px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  #passport-h5-login-bg .login-head {
    position: relative;
    height: 45px;
    padding: 0 45px;
    font-family: 'PingFangSC-Regular';
    font-size: 16px;
    line-height: 45px;
    color: #292D33;
    text-align: center; }
  #passport-h5-login-bg .login-head i {
    position: absolute;
    top: 0;
    width: 45px;
    height: 45px; }
  #passport-h5-login-bg .login-head i.login-back {
    display: none;
    left: 0;
    background: url() no-repeat center center;
    background-size: 16px 16px; }
  #passport-h5-login-bg .login-head i.login-back:active {
    background: url() no-repeat center center;
    background-size: 16px 16px; }
  #passport-h5-login-bg .login-head i.login-close {
    right: 0;
    background: url() no-repeat center center;
    background-size: 16px 16px; }
  #passport-h5-login-bg .login-head i.login-close:active {
    background: url() no-repeat center center;
    background-size: 16px 16px; }
  #passport-h5-login-bg .login-swiper {
    overflow: hidden;
    /* overflow-x: scroll; */ }
  #passport-h5-login-bg .login-content {
    width: 200%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    transition: -webkit-transform .2s linear;
    transition: transform .2s linear;
    transition: transform .2s linear, -webkit-transform .2s linear; }
  #passport-h5-login-bg .login-content.fade-to-code {
    width: 200%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0); }
  #passport-h5-login-bg .login-content.fade-to-code1 {
    width: 300%;
    -webkit-transform: translate3d(-33.33%, 0, 0);
    transform: translate3d(-33.33%, 0, 0); }
  #passport-h5-login-bg .login-content.fade-to-code2 {
    width: 300%;
    -webkit-transform: translate3d(-66.66%, 0, 0);
    transform: translate3d(-66.66%, 0, 0); }
  #passport-h5-login-bg .login-content .phone {
    float: left;
    width: 270px;
    padding: 20px 15px; }
  #passport-h5-login-bg .login-content form {
    position: relative;
    /* padding: 15px; */
    /* height: 44px; */
    box-sizing: content-box; }
  #passport-h5-login-bg .login-content form .login-telephone-wrap {
    height: 44px;
    margin-bottom: 15px;
    position: relative; }
    #passport-h5-login-bg .login-content form .login-telephone-wrap:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      box-sizing: content-box;
      border: 1px solid #B2B8C2;
      border-radius: 8px; }
    #passport-h5-login-bg .login-content form .login-telephone-wrap i {
      display: none;
      position: absolute;
      right: 13px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 3;
      width: 14px;
      height: 14px;
      background: url() no-repeat center;
      background-size: 130% 130%; }
      #passport-h5-login-bg .login-content form .login-telephone-wrap i:active {
        background: url() no-repeat center;
        background-size: 130% 130%; }
  #passport-h5-login-bg .login-content form input#login-telephone {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 44px;
    padding: 14px 15px;
    border: none;
    border-radius: 4px;
    -webkit-caret-color: red;
    caret-color: red;
    font-size: 21px;
    color: #292D33;
    -webkit-appearance: none;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0); }
  #passport-h5-login-bg .login-content form input#login-telephone::-webkit-input-placeholder {
    font-size: 16px;
    color: #D8DDE6;
    line-height: 27px;
    vertical-align: middle;
    font-family: PingFangSC-Regular; }
  #passport-h5-login-bg #get-code,
  #passport-h5-login-bg #get-image-code {
    width: 100%;
    height: 44px;
    border: none;
    background: #E7454A;
    border-radius: 4px;
    font-family: 'PingFangSC-Regular';
    font-size: 17px;
    color: #FFFFFF;
    line-height: 17px;
    margin-bottom: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  #passport-h5-login-bg #get-code.disable,
  #passport-h5-login-bg #get-image-code.disable {
    opacity: 0.6; }
  #passport-h5-login-bg #get-code:not(.disable):active,
  #passport-h5-login-bg #get-image-code:not(.disable):active {
    background: #C23A3F; }
  #passport-h5-login-bg .login-tip {
    font-family: 'PingFangSC-Regular';
    font-size: 12px;
    color: #848C99;
    line-height: 17px; }
  #passport-h5-login-bg .login-tip .dj-agreement {
    color: #C39869; }
  #passport-h5-login-bg .login-content .code {
    float: left;
    width: 270px;
    padding: 7px 20px;
    font-family: 'PingFangSC-Regular'; }
  #passport-h5-login-bg .login-content .code .code-send-info {
    font-size: 16px;
    color: #292D33;
    line-height: 16px; }
  #passport-h5-login-bg .login-content .code .code-info-tips {
    font-size: 14px;
    color: #B2B8C2;
    line-height: 14px;
    padding: 15px 0; }
  #passport-h5-login-bg .login-content .code .code-info-tips.repeat-send {
    color: #E6454A; }
  #passport-h5-login-bg .code-wrap {
    position: relative; }
  #passport-h5-login-bg .input-code {
    position: absolute;
    left: -6000px;
    top: -50px;
    opacity: 0;
    color: transparent; }
  #passport-h5-login-bg .code-list {
    padding: 20px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  #passport-h5-login-bg .code-list li {
    /* float: left; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    position: relative;
    text-align: center;
    line-height: 50px;
    font-size: 21px; }
    #passport-h5-login-bg .code-list li b {
      font-weight: normal; }
  #passport-h5-login-bg .code-list li:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #D8DDE6;
    border-radius: 8px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; }
  #passport-h5-login-bg .code-list li.active:after {
    border: 1px solid #525A66; }
  #passport-h5-login-bg .code-list li i {
    display: none;
    width: 1.5px;
    height: 36px;
    opacity: 1;
    background: #E6454A;
    border-radius: 38px; }
  #passport-h5-login-bg .code-list li i.active {
    display: block;
    -webkit-animation: focus 1s infinite;
    animation: focus 1s infinite; }
  #passport-h5-login-bg .voice-code {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 12px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #B2B8C2;
    line-height: 12px; }
  #passport-h5-login-bg .voice-code span#get-vocie-code-btn {
    height: 12px;
    color: #848c99; }
  #passport-h5-login-bg .voice-code span#get-vocie-code-btn:active {
    color: #C23A3F; }

@-webkit-keyframes fade-to-codes {
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0); } }

@keyframes fade-to-codes {
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0); } }

@-webkit-keyframes focus {
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes focus {
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.passport-h5-login-toast {
  padding: 20px 12px 14px;
  opacity: 0.75;
  background: #000000;
  border-radius: 2px;
  position: fixed;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 110; }
  .passport-h5-login-toast i {
    display: none;
    width: 23px;
    height: 23px;
    margin-bottom: 8px; }
  .passport-h5-login-toast .warn {
    display: inline-block;
    background: url() no-repeat;
    background-size: cover; }
  .passport-h5-login-toast .right {
    display: inline-block;
    background: url() no-repeat;
    background-size: cover; }
  .passport-h5-login-toast p {
    font-family: PingFangSC-Regular;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 15px;
    margin: 0; }
  .passport-h5-login-toast .over-everyday {
    width: 171px;
    line-height: 20px; }
  .passport-h5-login-toast .voice-toast {
    width: 182px;
    line-height: 20px; }

.passport-h5-login-toast-hide {
  display: none; }

.modal-open {
  position: fixed;
  width: 100%;
  height: 100%; }

#passport-h5-login-bg .image-code-wrap {
  padding: 20px 15px 0px;
  height: 192px; }

.login-content .image-code-wrap {
  float: left;
  width: 270px;
  font-family: 'PingFangSC-Regular';
  display: none; }

#passport-h5-login-bg .image-code-input-wrap {
  height: 48px;
  margin-bottom: 15px;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  position: relative; }
  #passport-h5-login-bg .image-code-input-wrap:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border: 1px solid #B2B8C2;
    border-radius: 8px; }

.image-code-text-wrap {
  width: 100%;
  position: relative;
  padding-left: 75px;
  z-index: 10; }

.clear-image {
  position: absolute;
  right: 98px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 3;
  width: 14px;
  height: 14px;
  background: url() no-repeat center;
  background-size: 130% 130%; }
  .clear-image:active {
    background: url() no-repeat center;
    background-size: 130% 130%; }

.login-content form input#image-code-input {
  width: 100%;
  height: 44px;
  padding: 14px 15px;
  border: none;
  border-radius: 4px;
  -webkit-caret-color: red;
  caret-color: red;
  font-size: 21px;
  color: #292D33;
  -webkit-appearance: none;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0); }

.login-content form input#image-code-input::-webkit-input-placeholder {
  font-size: 16px;
  color: #D8DDE6;
  line-height: 27px;
  vertical-align: middle;
  font-family: PingFangSC-Regular; }

.image-code-tag-wrap {
  position: absolute;
  top: 1px;
  right: 1px;
  height: 46px;
  width: 75px;
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  z-index: 11; }

#passport-h5-login-bg #image-code {
  height: 50px;
  width: 79px;
  position: relative;
  top: -2px;
  left: -2px;
  max-width: initial; }

